<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="../static/shopPrivate/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="../static/shopPrivate/css/thesame.css" media="all">
	<link rel="stylesheet" href="../static/shopPrivate/css/page.css" media="all">
	<link rel="stylesheet" href="../static/shopPrivate/shopManage/css/rightCon.css" media="all">
	<link rel="stylesheet" href="../static/shopPrivate/shopManage/css/tree.css" media="all">
</head>

<body class="layui-layout-body">
	<div class="layui-body">
		<div class="crumbs-nav f14px pad16px">
			<span>商铺列表</span>
		</div>
		<div class="layui-box-con">
			<div class="layui-left-con">
				<div class="border-radius4 bgWhite box-shadows">
					<div class="tree-con-box tree-con-box-hover" id="organizationDiv">
						<!--<ul  class="tree-one">
							<li>
								<div class="tree-children">
									<div>
										<p class="tree-arrow cursor"><img src="img/icon_select_up.png"></p>
										<p>111万里街道万里街道</p>
									</div>
								</div>
								<ul class="tree-two">
									<li>
										<div class="tree-children">
											<div class="current">
												<p class="tree-arrow cursor"><img src="img/icon_select_up.png"></p>
												<p>2222一级济阳街道一级济阳街道</p>
											</div>
										</div>
										<ul class="tree-three">
											<li>
												<div class="tree-children">
													<div>
														<p class="tree-arrow cursor"><img src="img/icon_select_up.png"></p>
														<p>333一级济阳街道</p>
													</div>
												</div>
												<ul class="tree-four">
													<li>
														<div class="tree-children">
															<div>
																<p>4441一级济阳街道</p>
															</div>
														</div>
														<div class="tree-children">
															<div>
																<p>4444一级济阳街道</p>
															</div>
														</div>
													</li>
												</ul>
											</li>
											<li>
												<div class="tree-children">
													<div>
														<p class="tree-arrow cursor"><img src="img/icon_select_up.png"></p>
														<p>333一级济阳街道</p>
													</div>
												</div>
												<ul class="tree-four">
													<li>
														<div class="tree-children">
															<div>
																<p>444一级济阳街道一级济阳街道</p>
															</div>
														</div>
														<div class="tree-children">
															<div>
																<p>4444一级济阳街道</p>
															</div>
														</div>
													</li>
												</ul>
											</li>
											<li>
												<div class="tree-children">
													<div>
														<p>3333一级济阳街道</p>
													</div>
												</div>
											</li>
										</ul>
									</li>
								</ul>
							</li>
						</ul> -->
					</div>
				</div>
			</div>
			<div class="layui-right-con">
				<div class="border-radius4">
					<div class="pad16px mb16px bgWhite box-shadows">
						<nav class="more-date border-box">
							<ul>


								<li>
									<div>经营业态</div>
									<div class="more-cur more-select" id="businessType">
										<p class="current" value="" >全部</p>
										<p th:each="list:${businessTypeList}" th:value="${list.id}" th:text="${list.labelName}"></p>
										


										<!-- <p>餐饮</p>
										<p>烟酒</p>
										<p>水果</p>
										<p>美容美发</p>
										<p>餐饮</p>
										<p>烟酒</p>
										<p>水果</p>
										<p>美容美发</p>
										<p>餐饮</p>
										<p>烟酒</p>
										<p>水果</p>
										<p>美容美发</p> -->
									</div>
									<div id="btnMore" class="btn-select-more" style="padding: 0 16px;">
										<span class="inline-block blue cursor">展开</span>
										<img src="../static/shopPrivate/shopManage/img/more_select_up.png" class="ml5px" style="vertical-align: 2px;">
									</div>
								</li>
								
								<li>
									<div>登记时间</div>
									<div class="more-cur" style="flex: none;" id="registerTimeType">
										<p class="current" value="" >全部</p>
										<p value="1">本月</p>
										<p value="2">最近3个月</p>
										<p value="3">本年</p>
									</div>
									<div class="form-style ml16px" style="display: flex; align-items: center">
										<p><input type="text" id="registerTime" placeholder="请选择日期" style="width: 240px"  class="form-input-time time"></p>
										<p class="btn-con btn-con-margin textRight lh32px">
											<span onclick="registerClick()" class="btn-inquire-ddd">确&nbsp;定</span>
										</p>
									</div>
								</li>
								<li>
									<div>关键词</div>
									<div class="form-style" style="display: flex; align-items: center">
										<p><input type="text" id="searchShopName" placeholder="请输入商铺名称"></p>
										<p><input type="text" id="searchAddress" placeholder="请输入门牌地址"></p>
										<p class="btn-con btn-con-margin textRight lh32px">
											<span class="btn-inquire" onclick="query()">查&nbsp;询</span>
										</p>
									</div>
								</li>
							</ul>
						</nav>
					</div>
					<div class="pad16px border-radius4 bgWhite box-shadows">
						<div class="new-data-btn mb16px lh30px overflow">
							<p class="left" onclick="addShop()">
								<span class="white border-radius4 bgBlue inline-block cursor">
									<img src="../static/shopPrivate/shopManage/img/button_add.png">新建
								</span>
							</p>
							<p class="left">
								<span class="white border-radius4 bgBlue inline-block cursor ml16px">
									<img src="../static/shopPrivate/shopManage/img/button_dc.png">导出明细
								</span>
							</p>
							<p class="left">
								<span class="white border-radius4 bgBlue inline-block cursor ml16px">
									<img src="../static/shopPrivate/shopManage/img/button_ewm.png">导出二维码
								</span>
							</p>
							<p class="right"><span class="block">共<em class="red" id="totalNum"></em>条数据</span></p>
						</div>
						<div class="table-center">
							<table class="layui-hide" id="test" lay-filter="test"></table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
<script src="../static/shopPrivate/js/jquery-3.1.1.min.js"></script>
<script src="../static/shopPrivate/layui/layui.js" charset="utf-8"></script>
<script src="../static/shopPrivate/shopManage/js/treeTwo.js"></script>
<script>

	$(function(){

		layui.use(['element','table','layer', 'laydate'], function() {
			var laydate = layui.laydate;
			laydate.render({
				elem: '.time',
  				range: '~' //或 range: '~' 来自定义分割字符
			});
		});

		$('.more-cur p').click(function(){
			$(this).addClass('current').siblings().removeClass('current');
			$("#registerTime").val("");
			query();
		})
		$('.more-select p:gt(8)').hide();
		$('.btn-select-more').click(function() {
			if ($(this).find('img').attr('src') == '../static/shopPrivate/shopManage/img/more_select_down.png') {
				$(this).find('img').attr('src', '../static/shopPrivate/shopManage/img/more_select_up.png').siblings("span").text("展开");
				$('.more-select p:gt(8)').hide();
		
			} else {
				$(this).find('img').attr('src', '../static/shopPrivate/shopManage/img/more_select_down.png').siblings("span").text("收起");
				$('.more-select p:gt(8)').show();
			}
		})


		//展开收起按钮是否需要 显示
		isBtnMore();
		//查询
		query();

		//获取组织架构
		getOrganization();

	})


	//展开收起按钮是否需要 显示
	function isBtnMore(){
		var pLength = $("#businessType p").length;
		if (pLength<8) {
			$("#btnMore").css("display","none");
		}
	}

	function query(){
		layui.use(['table','layer'], function() {
			var table = layui.table;
			//第一个实例
			table.render({
				elem: '#test'//,url: '/demo/table/user/'
				,url:"../shop/getShopListPage"
				,where: getformDate()
				,request: {
					 pageName: 'currentPage' //页码的参数名称，默认：page
					 ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
				}
				//,count: 10  //数据总数，从服务端得到
				//,data: listData
				,page: true //开启分页
				,limit:10 //每页显示的条数
				//,limits:[3,4,5]
				,groups: 9 //连续页码个数
				,parseData:function(res){
					return{
						"code":res.code,
						"data":res.data.data,
						"count":res.data.totalCount,
						"limit":res.data.pageSize,
					};
				}
				,cols: [
					[ //表头
						{
							field: 'id',
							title: '行号',
							fixed: 'left',
							type: 'numbers',
							// width:100
						}, {
							field: 'shopName',
							title: '商铺名称',
							// width:200
						}, {
							field: 'businessType',
							title: '经营业态',
						}, {
							field: 'address',
							title: '门牌地址',
						}, {
							field: 'createTime',
							title: '登记时间',
						},{
							field: 'sysUserName',
							title: '操作人员',
						},{
							field: 'operation',
							title: '操作',
							// width: 300,
							fixed: 'right',
							templet: function(res){
								// console.log(res);
								return '<div class="table-list-btn"><span class="blue" onclick="getDetail(\''+res.id+'\')">查看</span></div>'
							}
						}
					]
				]
				,done:function(res, curr, count){
				    $("#totalNum").text(count);
				}
			});
		});
	}

	
	function getformDate(){

		// var startDate = $("#startDate").val();//入住时间


		var searchShopName =$("#searchShopName").val();
		var searchAddress =$("#searchAddress").val();
		var businessType = $("#businessType p.current").attr("value");
		var registerTimeType = $("#registerTimeType p.current").attr("value");
		var registerTime = $("#registerTime").val();
		var orgId = overAllOrgId;

		// console.log("registerTime="+registerTime);
		// console.log("registerTimeType="+registerTimeType);

		var formDate ={
			searchShopName : searchShopName,
			searchAddress : searchAddress,
			businessType :businessType,
			registerTimeType : registerTimeType,
			registerTime : registerTime,
			orgId : orgId
		}

		return formDate;
	}


	//时间确定
	function registerClick(){

		$("#registerTimeType p").removeClass('current');

		query();

	}


	function getDetail(id){
		window.location.href="../shop/jumpShopDetail?id="+id;
	}



	function addShop(){
		window.location.href="../shop/jumpShopAdd";
	}






	var overAllOrgId = "";
	function organizationChangeQuery(obj){
		var orgId = $(obj).data("orgid");
		// console.log("organizationChangeQuery = "+orgId );
		overAllOrgId = orgId;
		if ($(obj).children('p').length>1) {
			if ($(obj).children('p').find('img').attr('src')=='../static/shopPrivate/shopManage/img/icon_select_down.png') {
				query();
			}
		}else{
			query();
		}
	}

	//获取组织架构
	function getOrganization(){

		var formDate =
            {	
            };

        $.ajax({
            url: "../organization/getOrgList",
            type: "get",
            dataType: "json",
            data: formDate,
            async: false,
            success: function (res) {
				 
                if (res.code == "200") {

					var organizationList = res.data;

					var str="";

					var whichFloor = 1;
					var uLHasNum = switchCss(whichFloor);
					str+="<ul class="+uLHasNum+">";
					$.each(organizationList,function(key,rog1){
                		
						str+='<li>';
						str+='<div class="tree-children" >';
						str+='<div  data-orgid="'+rog1.id+'" onclick="organizationChangeQuery(this)" >';

						str+="<p class='tree-arrow cursor'><img src='../static/shopPrivate/shopManage/img/icon_select_up.png'></p>"
						str+='<p >'+rog1.name+'</p>';
						str+='</div>';
						str+='</div>';
						
						if ( !isNull(rog1.sysOrganizations)  && rog1.sysOrganizations.length>0) {
							str+=splicingMainStr(rog1,whichFloor);
						}
						str+='</li>';
					});
					str+='</ul>';	
					 // console.log(str);

					$("#organizationDiv").html(str);
					//初始化
					init();
                }else{
                	layer.msg(res.msg, {icon: 2,time:1500});
                }
            }
        });

	}


	//拼接
	function splicingMainStr(rog1,whichFloor){
		var str = "";
		if(!isNull(rog1.sysOrganizations) && rog1.sysOrganizations.length>0){
			whichFloor = whichFloor+1;
			var uLHasNum = switchCss(whichFloor);

			str+='<ul class=" '+uLHasNum+'">';

			$.each(rog1.sysOrganizations,function(key,rog2){
				if( !isNull(rog2.sysOrganizations) && rog2.sysOrganizations.length>0){
					str+='<li>';
					str+='<div class="tree-children">';
					str+='<div  data-orgid="'+rog2.id+'" onclick="organizationChangeQuery(this)"  >';
					str+="<p class='tree-arrow cursor'><img src='../static/shopPrivate/shopManage/img/icon_select_up.png'></p>"
					str+='<p>'+rog2.name+'</p>';
					str+='</div>';
					str+='</div>';
					str+=splicingMainStr(rog2,whichFloor);
					str+='</li>';
				}else{
					if(!isNull(rog2)){
						str+=splicingStr(rog2);
					}
				}
			})
			str+='</ul>';

		}else{
			if(!isNull(rog1)){
				str+=splicingStr(rog1);
			}
		}
		return str;
	}



	//拼接
	function splicingStr(org){
		var str ="";
		//是否是行政机构 0-否，1-是    type 是否实际勾选 1-是 0-否
		str+='<li>';
		str+='<div  class="tree-children">';
		str+='<div data-orgid="'+org.id+'" onclick="organizationChangeQuery(this)"  >';
		str+='<p>'+org.name+'</p>';
		str+='</div>';
		str+='</div>';
		str+='</li>';
		return str;
	}


	//层级转换标签
	function switchCss(whichFloor){

		var uLHasNum = "";

		switch (whichFloor) {
		  case 1:
		    uLHasNum = "tree-one";
		    break;
		  case 2:
		    uLHasNum = "tree-two";
		    break;
		  case 3:
		    uLHasNum = "tree-three";
		    break;
		  case 4:
		    uLHasNum = "tree-four";
		    break;
		  case 5:
		    uLHasNum = "tree-five";
		}
		return uLHasNum;
	}

	function isNull(value) {
		return value == null || value === "" || value === undefined;
	}











</script>
</body>

</html>
